<template>
    <div class="copy">
        <!-- <span class="text" @mouseenter="mouseEnt" @mouseleave="mouseEnt"> {{ intercept(prop.text) }}</span> -->
        <span class="text" @click.self="onText" @mouseenter="mouseEnt" @mouseleave="mouseEnt"> {{ intercept(prop.text)
        }}</span>
        <span v-if="copyIcon" class="copy-btn iconfont icon-copy"></span>
        <img v-if="isSearch" class="sea-btn" @click.self.stop="onSearch" src="@/assets/sousuo-2.svg" />
        <VIcon v-if="isCopy" class="copy-btn" @click.self.stop="copy">mdi mdi-content-copy </VIcon>
    </div>
</template>

<script lang="ts" setup>
import { Notify } from "@/components/y-notify/script";
import i18n from "@/locals";
enum MouseType {
    ENTER = "mouseenter",
    LEAVE = "mouseleave"
}
const prop = defineProps({
    text: {
        type: String,
        default: ""
    },
    hide: {
        type: Boolean,
        default: true
    },
    num: {
        type: Number,
        default: 6
    },
    copyIcon: {
        type: Boolean,
        default: false
    },
    isSearch: {
        type: Boolean,
        default: false
    },
    isCopy: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(["search", "change"]);

//如果isCopy为true的话只有点击复制按钮才是复制
function BoxClick() {
    if (!prop.isCopy) {
        copy();
    } else {
    }
}
function onText() {
    emit("change", prop.text);
}

function onSearch() {
    console.log("search");
    emit("search", prop.text);
}

/**过滤地址和交易所名称 */
function intercept(char: string) {
    // console.log('过滤地址!!!', char)
    if (!char) return;
    if (!char.startsWith('0x')) return char
    const seat = "***";
    const seat_ = "...";
    let char_ = char;
    if (!char) return;
    if (prop.hide) {
        if (char_.length < prop.num) return char_;
        char_ = char.slice(0, prop.num).concat(seat).concat(char.slice(-prop.num));
        if (char.indexOf("0x") === -1) {
            char_ = char;
            if (char.length > 20) {
                char_ = char.slice(0, 20).concat(seat_);
            }
        }
    }
    return char_;
}
/**鼠标移动事件 */
function mouseEnt(ent: MouseEvent) {
    const node = ent.target as HTMLElement;
    const rect = node.getBoundingClientRect();
    const x = rect.x + rect.width / 2;
    const y = rect.y + rect.height / 2;
    switch (ent.type) {
        case MouseType.ENTER:
            const p = addTipsElment();
            let ofy = 4;
            if (prop.text.length > 24) {
                ofy += 16;
            }
            p.style.left = `${rect.x}px`;
            p.style.top = `${y - rect.height * 2 - ofy * window.devicePixelRatio}px`;
            node.appendChild(p);
            if (x + p.clientWidth > window.innerWidth) {
                p.style.left = "";
                p.style.right = `${10}px`;
            }
            break;
        case MouseType.LEAVE:
            node.removeChild(node.getElementsByTagName("p")[0]);
            break;
    }
}
/**创建提示p元素 */
function addTipsElment() {
    const p = document.createElement("p");
    p.setAttribute("class", "tips");
    let str = prop.text;
    if (str.length > 24) {
        let str1 = str.substring(0, 24);
        let str2 = str.substring(24);
        str = str1 + "<br/>" + str2;
    }
    p.innerHTML = str;
    return p;
}
/**设置粘贴板文字 */
function copy() {
    // alert("复制成功");
    // window.navigator.clipboard.writeText(prop.text);
    let textToCopy = prop.text;
    // navigator clipboard 需要https等安全上下文
    if (navigator.clipboard && window.isSecureContext) {
        // navigator clipboard 向剪贴板写文本
        Notify.alert(i18n.global.t("message.Global.copy"));
        return navigator.clipboard.writeText(textToCopy);
    } else {
        console.log("点击复制");
        // 创建text area
        let textArea: any = document.createElement("textarea");
        textArea.value = textToCopy;
        // 使text area不在viewport，同时设置不可见
        textArea.style.position = "absolute";
        textArea.style.opacity = 0;
        textArea.style.left = "-999999px";
        textArea.style.top = "-999999px";
        document.body.appendChild(textArea);
        // textArea.focus();
        textArea.select();
        Notify.alert(i18n.global.t("message.Global.copy"));
        return new Promise((res: any, rej: any) => {
            // 执行复制命令并移除文本框
            document.execCommand("copy") ? res() : rej();
            textArea.remove();
        });
    }
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
